<template>
    <el-row class="listen">
        <div class="listen-title">新人必听</div>
        <el-col class="l-item" :span="8">
            <div class="l-img">
                <img src="//imagev2.xmcdn.com/storages/9d32-audiofreehighqps/3A/4A/GKwRIasGToMxAASCiQFOhYsw.jpeg!op_type=3&columns=144&rows=144&magick=webp"
                    alt="">
                <div class="icon">
                    <van-icon class="v-icon" name="play-circle-o" color="#fff" size="14" />
                    1.53亿
                </div>
            </div>
            <p class="l-title">隐秘的犯人|双男主|悬疑推理|高智商犯罪|广播剧</p>
        </el-col>
        <el-col class="l-item" :span="8">
            <div class="l-img">
                <img src="//imagev2.xmcdn.com/storages/9d32-audiofreehighqps/3A/4A/GKwRIasGToMxAASCiQFOhYsw.jpeg!op_type=3&columns=144&rows=144&magick=webp"
                    alt="">
                <div class="icon">
                    <van-icon name="play-circle-o" color="pink" size="14" />
                    1.53亿
                </div>
            </div>
            <p class="l-title">隐秘的犯人|双男主|悬疑推理|高智商犯罪|广播剧</p>
        </el-col>
        <el-col class="l-item" :span="8">
            <div class="l-img">
                <img src="//imagev2.xmcdn.com/storages/9d32-audiofreehighqps/3A/4A/GKwRIasGToMxAASCiQFOhYsw.jpeg!op_type=3&columns=144&rows=144&magick=webp"
                    alt="">
                <div class="icon">
                    <van-icon name="play-circle-o" color="pink" size="14" />
                    1.53亿
                </div>
            </div>
            <p class="l-title"></p>
        </el-col>
        <el-col class="l-item" :span="8">
                <div class="l-img">
                    <img src="//imagev2.xmcdn.com/storages/9d32-audiofreehighqps/3A/4A/GKwRIasGToMxAASCiQFOhYsw.jpeg!op_type=3&columns=144&rows=144&magick=webp"
                        alt="">
                    <div class="icon">
                        <van-icon class="v-icon" name="play-circle-o" color="#fff" size="14" />
                        1.53亿
                    </div>
                </div>
                <p class="l-title">隐秘的犯人|双男主|悬疑推理|高智商犯罪|广播剧</p>
            </el-col>
        <el-col class="l-item" :span="8">
            <div class="l-img">
                <img src="//imagev2.xmcdn.com/storages/9d32-audiofreehighqps/3A/4A/GKwRIasGToMxAASCiQFOhYsw.jpeg!op_type=3&columns=144&rows=144&magick=webp"
                    alt="">
                <div class="icon">
                    <van-icon name="play-circle-o" color="pink" size="14" />
                    1.53亿
                </div>
            </div>
            <p class="l-title"></p>
        </el-col>
        <el-col class="l-item" :span="8">
            <div class="l-img">
                <img src="//imagev2.xmcdn.com/storages/9d32-audiofreehighqps/3A/4A/GKwRIasGToMxAASCiQFOhYsw.jpeg!op_type=3&columns=144&rows=144&magick=webp"
                    alt="">
                <div class="icon">
                    <van-icon class="v-icon" name="play-circle-o" color="pink" size="12" />
                    1.53亿
                </div>
            </div>
            <p class="l-title"></p>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.listen {
    .listen-title {
      width: 100%;
      padding: 0 15px;
      font-size: 18px;
      color: #40404c;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .l-item {
      text-align: center;

      .l-img {
        position: relative;

        img {
          width: 100px;
          border-radius: 5px;
        }

        .icon {
          position: absolute;
          bottom: 5px;
          left: 15px;
          font-size: 12px;
          color: #fff;
          align-items: center;

          .v-icon {
            background-color: rgba(0, 0, 0, .2);
            border-radius: 50%;
          }
        }
      }

      .l-title {
        font-size: 14px;
        margin: 0;
        padding: 0;
        padding: 0 5px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin-bottom: 20px;
        text-align: left;
        width: 100px;
        margin-left: 5px;
      }
    }
  }
</style>